<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Upload jQuery AJAX</title>
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="../js/bootstrap.min.js"></script>
        <script type="text/javascript" src="../js/jquery.form.js"></script>
        <style>
            form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
            #progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
            #bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
            #percent { position:absolute; display:inline-block; top:3px; left:48%; }
        </style>
    </head>
    <body>
        <form id="myForm" action="uploader.php" method="post" enctype="multipart/form-data">
            <input type="file" size="60" name="myfile">
            <input type="submit" value="Ajax File Upload">
        </form>
        <div id="progress">
            <div id="bar"></div>
            <div id="percent">0%</div >
        </div>
        <div id="message"></div>
        <script type="text/javascript">
            $(function() {
                var options = {
                    beforeSend: function() {
                        $("#progress").show();
                        //clear everything
                        $("#bar").width('0%');
                        $("#message").html("");
                        $("#percent").html("0%");
                    },
                    uploadProgress: function(event, position, total, percentComplete) {
                        $("#bar").width(percentComplete + '%');
                        $("#percent").html(percentComplete + '%');
                    },
                    success: function() {
                        $("#bar").width('100%');
                        $("#percent").html('100%');
                    },
                    complete: function(response) {
                        $("#message").html("<font color='green'>" + response.responseText + "</font>");
                    },
                    error: function() {
                        $("#message").html("<font color='red'> ERROR: unable to upload files</font>");
                    }
                };
                $("#myForm").ajaxForm(options);
            });
        </script>
    </body>
</html>